<template>
  <div>
    <div class="header">
      <el-menu
        background-color="#20222a"
        text-color="rgba(255,255,255,.7)"
        active-text-color="#FFFFFF"
        :router="true">

        <div v-for="(item, index) in allMenus" :key="index">
          <el-menu-item v-if="!item.child" :index="`${index + 1 + ''}`" :route="{path: item.path}" :class="$route.path === item.path ? 'active' : ''">
            <i :class="item.icon"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
          <el-submenu v-else :index="`${index + 1 + ''}`">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item
              v-for="(child, childIndex) in item.child"
              :key="childIndex"
              :index="`${index + 1}-${childIndex + 1}`"
              :route="{path: child.path}"
              :class="$route.path === child.path ? 'active' : ''">
              {{child.name}}
            </el-menu-item>
          </el-submenu>
        </div>
      </el-menu>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'LeftMenu',
  data () {
    return {
      allMenus: [
        {
          name: '首页',
          path: '/index',
          icon: 'el-icon-s-home'
        },
        {
          name: '二级菜单',
          icon: 'el-icon-location',
          child: [
            {
              name: '首页',
              path: '/index'
            },
            {
              name: '登录页面',
              path: '/login'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/styl/variable';
.header
  position fixed
  left 0
  top 60px
  bottom 0
  width 220px
  .el-menu
    height 100%
    width 200px
.active
  background-color $green_v1 !important
  color $white_v1 !important
  i
    color $white_v1
</style>
